<template>
  <div id="container1" class="container1"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data(){
    return{

    }
  },
  mounted() {
    this.initEcharts()
  },
  methods:{
    initEcharts(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('container1'));
      let option = {
        grid: [
          {
            top: '15%',
            left: '15%',
            right: '15%',
            bottom: '18%',
            // containLabel: true
          },
        ],
        tooltip: {
          show: true,
          trigger: 'item',
          formatter:function(params) {
            if (params.seriesType == "scatter"){
              return '金额：' + params.value[0] + '%，问题：' + params.value[1] + '%'
            }
            return '';
          }
        },
        xAxis: {
          name: '金额',
          type: 'value',
          min: (value) => (-value.max),
          max: (value) => (value.max),
          splitLine:{
            show:false
          },
          axisLabel: {show: false},
          axisLine: {symbol: ['none','arrow'],lineStyle: {color: '#ffffff'}},
          axisTick:{
            show:false,
          }, //隐藏x轴刻度
          offset: -10,
        },
        yAxis: {
          name: '问题',
          type: 'value',
          min: (value) => (-value.max),
          max: (value) => (value.max + 8),
          splitLine:{
            show:false
          },
          axisLabel: {show: false},
          axisLine: {symbol: ['none','arrow'],lineStyle: {color: '#ffffff'}},
          axisTick:{show:false}//隐藏x轴刻度
        },
        color: ['#0096bb','#006dd9','#00b6ff','#00e5c0'],
        series: [
          {
            type: 'pie',
            radius: ['30%', '45%'],
            avoidLabelOverlap: false,
            hoverAnimation:false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false,
            },
            data: [
              {name: 'topRight', value: 20},
              {name: 'bottomRight', value: 20},
              {name: 'bottomLeft', value: 20},
              {name: 'topLeft', value: 20},
            ],
            itemStyle: {
              normal: {
                label:{
                  color: '#ffffff',
                  show:true,
                  position:"inner",
                  formatter: function (params) {
                    let str = ''
                    if (params.data.name == 'topRight'){
                      str = '金额' + '{up|} \n\n' + '问题' + '{up|}'
                    }
                    if (params.data.name == 'bottomRight'){
                      str = '金额' + '{up|} \n\n' + '问题' + '{down|}'
                    }
                    if (params.data.name == 'bottomLeft'){
                      str = '金额' + '{down|} \n\n' + '问题' + '{down|}'
                    }
                    if (params.data.name == 'topLeft'){
                      str = '金额' + '{down|} \n\n' + '问题' + '{up|}'
                    }
                    return str;
                  },
                  rich : {
                    //这里设置您的图片引用名称
                    up : {
                      //引入图片
                      backgroundColor : {
                        image : require('../../../assets/img/up.png')
                      },
                    },
                    down : {
                      backgroundColor : {
                        image : require( '../../../assets/img/down.png')
                      },
                    },
                  },
                }
              },
            }
          },
          {
            symbolSize: 20,
            data: [
              {name: '工程建设\n及项目管理',value: [-75, 47]},
              {name: '电力营销',value: [-66, 88],},
              {name: '组织人事\n及人力资源',value: [97, 93],},
              {name: '财务资产',value: [-80, -48],},
              {name: '法律合规',value: [-85, -15],},
              {name: '物资及\n采购管理',value: [63, -44]},
            ],
            type: 'scatter',
            label:{
              show:true,
              formatter: "{b}",
              position: "bottom",
              color: '#ffffff'
            },
            itemStyle: {
              color: ({ data }) => { // 解构赋值后不同象限不同颜色
                let x = data.value[0]
                let y = data.value[1]
                if (x >= 0 && y >= 0) {
                  return '#0096bb'
                } else if (x >= 0 && y < 0) {
                  return '#006dd9'
                } else if (x < 0 && y >= 0) {
                  return '#00e5c0'
                } else if (x < 0 && y < 0) {
                  return '#00b6ff'
                }
              }
            }
          },
          {
            type: 'pie',
            radius: '27%',
            data: [
              { value: 20, name: '持续\n监督' },
              { value: 20, name: '重点\n关注' },
              { value: 20, name: '减少\n关注' },
              { value: 20, name: '成效\n关注' },
            ],
            itemStyle: {
              normal: {
                color: 'none',
                label:{
                  color: '#ffffff',
                  show:true,
                  formatter: "{b}",
                  position:"inner"
                }
              },
            }
          }
        ],
      };
      myChart.setOption(option);
    },
  }
}
</script>

<style scoped>
.container1{
  width: 100%;
  height: 100%;
}
</style>